<template>
	<view class="swiper-packbox">
		<image class="swiper-packbox-bg absolute" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/swiper-content-bg.png`" />
		
		<view class="swiper-packbox-content relative">
			<view v-for="(item, index) in swiperSlideList" :class="item.class" :key="index" class="swiper-item relative flex-all-center">
				
				<image class="bg" v-if="item.class === 'swiper-slide-3'" :src="commonConfigs.domainFrontFileLink + '/files/images/welfareHouse/swiper-bg-active.png'" mode=""></image>
				
				<image class="bg" v-else :src="commonConfigs.domainFrontFileLink + '/files/images/welfareHouse/swiper-bg.png'" mode=""></image>
				
				<!-- 奖品类型: 1赏品 2优惠券 3机能 -->
				<image :src="item.reward_item_cover"  mode="heightFix" 
					:class="['item-reward', 'relative', item.class !== 'swiper-slide-3' ? 'item-reward-bg' : '']"
					v-if="item.type == 1" />
				
				<image :src="item.reward_item_cover"  mode="heightFix"
					:class="['item-balanch', 'relative', item.class === 'swiper-slide-3' ? 'item-balanch-3' : '']"
					v-if="item.type == 3" />

				<view :style="{ 'background-image': `url(${item.reward_item_cover})` }" v-if="item.type == 2"
				:class="['item-coupon', 'relative', item.class !== 'swiper-slide-3' ? 'item-coupon-bg' : '']">
					<view :class="['coupon-info', 'font-hanserif-bold', item.class !== 'swiper-slide-3' ? 'coupon-aside' : '']">
						<view class="coupon-title truncate">{{ item.subtitile }}</view>
					
						<view class="coupon-dates flex-direction-column flex-start">
							<view style="text-align: left;">有效期至:</view>
							<view style="text-align: left;white-space: nowrap;">{{ item.end_time }}</view>
						</view>
						
						<view class="coupon-price truncate">
							<text>¥{{ item.recovery_price }}</text>
							<view class="text" style="font-size: 10rpx;">抵扣券</view>
						</view>
					</view>
				</view>

				<text class="item-title truncate" v-if="item.class === 'swiper-slide-3'">
					<text>{{ item.reward_item_name }}</text>
					<text v-if="item.type === 3">*{{ item.num }}</text>
				</text>
			</view>
		</view>	
	</view>
</template>
<script>
	import { setFixArrayFun, setAsyncFunWait } from '@/setupproject/TOOLS_FUN';

	let CarouselClassList = [];

	export default {
		name: 'comCarouselBox',
		props: {
			resLists: Array
		},
		data() {
			return {
				swiperSlideList: [],
			};
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			}
		},
		watch: {
			resLists() {
				this.getSwiperSlideFun();
			}
		},
		destroyed() {
			
		},
		mounted() {
			setInterval(this.getAnimateSwiperFun, 2800);
		},
		methods: {
			getSwiperSlideFun() {
				if(this.resLists.length === 1) {
					CarouselClassList = ['swiper-slide-3'];
				}else if(this.resLists.length === 2) {
					CarouselClassList = [
						'swiper-slide-3',
						'swiper-slide-4',
					];
				}else if(this.resLists.length === 3) {
					CarouselClassList = [
						'swiper-slide-2',
						'swiper-slide-3',
						'swiper-slide-4',
					];
				}else if(this.resLists.length === 4) {
					CarouselClassList = [
						'swiper-slide-2',
						'swiper-slide-3',
						'swiper-slide-4',
						'swiper-slide-5',
					];
				}else if(this.resLists.length === 5) {
					CarouselClassList = [
						'swiper-slide-1',
						'swiper-slide-2',
						'swiper-slide-3',
						'swiper-slide-4',
						'swiper-slide-5',
					];
				}else{
					CarouselClassList = [
						'swiper-slide-1',
						'swiper-slide-2',
						'swiper-slide-3',
						'swiper-slide-4',
						'swiper-slide-5',
					];
					
					let resListLength = this.resLists.length - 5;
					let middleValue = parseInt((this.resLists.length - 5) / 2);
					
					for (let i = 0; i < middleValue; i++) {
						CarouselClassList.push('swiper-slide-right');
						CarouselClassList.unshift('swiper-slide-left');
					}
					if(resListLength % 2) {
						CarouselClassList.push('swiper-slide-right');
					}
				}
				
				const swiperList = setFixArrayFun(this.resLists, CarouselClassList.length);
				
				this.swiperSlideList = (swiperList || []).map((item, index) => ({
					...item,
					class: CarouselClassList[index],
				}));
			},

			async getAnimateSwiperFun() {
				if (this.swiperSlideList.length <= 0) {
					this.getSwiperSlideFun();
				}
				
				await setAsyncFunWait(500);
				
				const classNameEnd = this.swiperSlideList[this.swiperSlideList.length - 1].class;
				
				for (let i = this.swiperSlideList.length - 1; i > 0; i--) {
					const element = this.swiperSlideList[i];
					element.class = this.swiperSlideList[i - 1].class;
				}
				
				this.swiperSlideList[0].class = classNameEnd;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.swiper-packbox {
		width: 100%;
		height: 510rpx;
		overflow: hidden;

		.swiper-packbox-bg {
			width: 686rpx;
			height: 224rpx;
			padding-top: 212rpx;
			margin: 0 auto;
			z-index: 0;
			left: 0;
			right: 0;
		}

		.swiper-packbox-content {
			width: 100%;
			z-index: 1;

			.swiper-slide-left {
				position: absolute;
				width: 214rpx;
				height: 261rpx;
				top: 19.2%;
				left: -60%;
				opacity: 0.1;
				z-index: 1;
				transition: 0.5s;
			}

			.swiper-slide-1 {
				position: absolute;
				width: 214rpx;
				height: 261rpx;
				top: 19.2%;
				left: -30%;
				opacity: 0.1;
				z-index: 1;
				transition: 0.5s;
			}

			.swiper-slide-2 {
				position: absolute;
				width: 214rpx;
				height: 261rpx;
				top: 95rpx;
				left: 11%;
				opacity: 0.5;
				z-index: 2;
				transition: 0.4s;
			}

			.swiper-slide-3 {
				position: absolute;
				width: 324rpx;
				height: 395rpx;
				top: 46rpx;
				left: 52%;
				margin-left: -26.5%;
				opacity: 1;
				z-index: 4;
				transition: 0.4s;
			}

			.swiper-slide-4 {
				position: absolute;
				width: 214rpx;
				height: 261rpx;
				top: 95rpx;
				left: 58%;
				opacity: 0.5;
				z-index: 2;
				transition: 0.4s;
			}

			.swiper-slide-5 {
				position: absolute;
				width: 214rpx;
				height: 261rpx;
				top: 19.2%;
				left: 120%;
				opacity: 0.1;
				z-index: 1;
				transition: 0.4s;
			}

			.swiper-slide-right {
				position: absolute;
				width: 214rpx;
				height: 261rpx;
				top: 19.2%;
				left: 160%;
				opacity: 0.1;
				z-index: 1;
				transition: 0.4s;
			}

			.swiper-item {
				.swiper-img {
					width: 367rpx;
					height: 464rpx;
					position: absolute;
					top: -126rpx;
					left: -66rpx;
				}
				.item-coupon {
					top: -50rpx;
					width: 195rpx;
					height: 264rpx;
					background-size: 100% 100%;
					
					&.item-coupon-bg {
						transform: scale(0.7);
					}
					
					.coupon-info {
						width: 100%;
						text-align: center;
						padding: 60rpx 0 60rpx 0;
						.coupon-price{
							width: 100%;
							font-size: 36rpx;
						}
						.text{
							font-size: 32rpx;
						}
						.coupon-title{
							width: 80%;
							height: 40rpx;
							line-height: 40rpx;
							font-size: 26rpx;
							color: #000;
							border-radius: 20rpx;
						}
						.coupon-dates{
							font-size: 18rpx;
							color: #000000;
							margin: 10rpx 0;
						}
					}
					.coupon-aside {
						width: 100%;
						text-align: center;
						padding: 60rpx 0 60rpx 0;
						.coupon-price{
							width: 100%;
							font-size: 36rpx;
						}
						.text{
							font-size: 32rpx;
						}
						.coupon-title{
							width: 80%;
							height: 40rpx;
							line-height: 40rpx;
							font-size: 26rpx;
							color: #000;
							border-radius: 20rpx;
						}
						.coupon-dates{
							font-size: 18rpx;
							color: #000000;
							margin: 10rpx 0;
						}
					}
				}
				.item-reward {
					width: 100%;
					height: 254rpx;
					border-radius: 10rpx;
					top: -30rpx;
					&.item-reward-bg {
						transform: scale(0.7);
					}
				}
				
				.item-balanch {
					width: 100rpx;
					height: 100rpx;
					top: -20rpx;
					
					&.item-balanch-3 {
						width: 150rpx;
						height: 150rpx;
					}
				}

				.item-title {
					width: 100%;
					text-align: center;
					font-size: 32rpx;
					font-weight: 600;
					color: #FFF;
					position: absolute;
					bottom: -50rpx;
					left: 0;
				}
			}
		}
	}
</style>
